<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border:1px solid;
        }
        .container{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box acitve" id="myid" myattr="123" >111</div>
    <script>

        var boxEle = document.querySelector(".box");
        // 1.操作类名className(重点);
        // 获取或者设置元素的类名  className
        // 获取类名
        // console.log( boxEle.className);
        // 设置类名；注意：设置的类名会覆盖之前的类名；
        // document.onclick = function(){
        //     // boxEle.className = "container";
        //     boxEle.className += " container"; 
        //     //  boxEle.className =  boxEle.className + " container"  --->box acitve container
        // }
        // 总结：1.可以获取类名 2.可以设置类名 （不要覆盖了之前的类名）;
       
        // 2.操作id
        // console.log( boxEle.id);
        // document.onclick = function(){
        //     boxEle.id = "hello";
        // }
        

        // 3.操作元素的属性；

        // 1.获取属性值  var 属性值 =  getAttribute("属性名");
    //    var res =  boxEle.getAttribute("class");
    //    console.log(res);
        // 获取元素的所有属性attributes
        // var arr =  boxEle.attributes ;
        // console.log(typeof arr[2]);

        // 2.设置属性 : 元素.setAttribute("属性名","属性值");
            // document.onclick = function(){
            //     boxEle.setAttribute("mya","world");
            // }

        // 3.删除属性 removeAttribute("属性名");
        // document.onclick = function(){
        //     boxEle.removeAttribute("class");
        // }

       console.dir(  boxEle);
    //    boxEles = {
    //         num:10,
    //         attributes:["class","id","myattr"]
    //     }


    // boxEle.num = 10;
    // console.dir(boxEle);
    // console.log(boxEle.num);



    </script>
</body>
</html>